<script>
import {ref} from 'vue'
import axios from "axios";
import global from "../../views/global/global";
// import { ElButton, ElDialog } from 'element-plus'



export default {
  //组件部件
  // setup(){
  //   const format=computed(()=>{ //实时获取当前时间
  //     const oDate=new Date()
  //     const year=oDate.getFullYear()
  //     const month=oDate.getMonth()+1
  //     const day=oDate.getDay().toString()
  //     const hour=oDate.getHours()
  //     const minutes=oDate.getMinutes()
  //     const seconds=oDate.getSeconds()
  //     return year+'-'+month+'-'+day+' '+hour+':'+minutes+':'+seconds
  //   })
  // },
  data(){
    return{
      //显示当前星期
      week:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
      date: new Date(),
      checkedValue:"",//单选框
      dialogVisible:false,
      dialogVisible1:false,
      dialogVisible2:false,
      dialogVisible3:false, //请假——查看
      dialogVisible4:false, //请假——审核
      //调用global的user属性
      user:global.user,
      desktopList:[],//我的便签
      desktop:{ //我的便签内容
        userId:"",
        noteId:"",
        title:"",
        content:"",
      },
      call:{ //通知公告
        title:"",
        content:"",
        startTime:"",
      },
      pageDto:{
        pageSize:5,
        pageNum:1
      },
      titles_top : "待处理任务《请假申请》",
      statics : "待处理",
      statics2 : "批准",

      isoks1:true, //请假
      isoks2:false, //出差
      isoks3:false, //收入
      isoks4:false, //用车
      isoks5:false, //用章
      isoks6:false, //图书
      isoks7:false, //名片
      announcementList:[], //通告管理查询所有
      total:0,
      pages:0,
      leaveApplicationsList:[],//请假申请查询所有
      travelApplicationsList:[],//出差申请查询所有
      incomeProofApplicationsList:[],//收入证明流程查询所有
      VehicleUsageAndVehicleManagementAndUsersList:[],//用车申请查询所有
      SealManagementList:[],//用章申请查询所有
      BookBorrowingList:[],//图书申请查询所有
      BusinessCardPrintingList:[],//名片印制查询所有

      //根据id查看对应显示的修改信息
      LookUpdateLeaveApplicationsAndUsersList:{},//请假
    }

  },created() {
    this.getDate();//我的便签
    this.CalData();//通知公告
    this.getLeaveApplicationsList();//请假申请查询所有
    this.getTravelApplicationsList();//出差申请查询所有
    this.getincomeProofApplicationsList();//收入证明流程查询所有
    this.getVehicleUsageAndVehicleManagementAndUsersList();//用车申请查询所有
    this.getSealManagementList();//用车申请查询所有
    this.getBookBorrowingList();//图书申请查询所有
    this.getBusinessCardPrintingList();//名片印制查询所有

  },methods:{
    //根据id查看对应显示的修改信息
    //根据id查看对应显示的修改信息——请假
    LookleaveApplicationsAll(applicationId){
      this.dialogVisible3 = true
      axios.get(`/oa/desktop/LookUpdateLeaveApplicationsAndUsersList/${applicationId}`).then((data)=>{
        this.LookUpdateLeaveApplicationsAndUsersList = data.data

      })
    },
    //审核 修改信息操作，传入需要进行修改的对象
    getLookUpdateLeaveApplicationsAndUsersLists(applicationId){
      this.dialogVisible4 = true
      axios.get(`/oa/desktop/LookUpdateLeaveApplicationsAndUsersList/${applicationId}`).then((data)=>{
        this.LookUpdateLeaveApplicationsAndUsersList = data.data
      })
    },
    //确认审核信息——请假
    updateIsok_1(){
      this.LookUpdateLeaveApplicationsAndUsersList.approverId = this.user.id
      this.LookUpdateLeaveApplicationsAndUsersList.status = this.checkedValue
      axios.put(`/oa/desktop/UpdateStatusLeaveApplicationsAndUsersList`,this.LookUpdateLeaveApplicationsAndUsersList).then((data)=>{
        if(data.data.code === 1){
          this.dialogVisible4 = false
          this.getLeaveApplicationsList()
          this.$message({
            type: 'success',
            message: '审核成功!'
          });
        }else {
          alert("修改失败")
          this.dialogVisible4 = false
        }
      })

    },


    closes(){
      if (confirm("是否退出登录？")) {
        this.$router.push("/")
      }
    },
    //待处理任务——名片印制查询所有
    getBusinessCardPrintingList(){
      axios.get(`/oa/desktop/businessCardPrintingAll`).then((data)=>{
        this.BusinessCardPrintingList = data.data.data;
      }).catch((error)=>{

      })
    },
    //待处理任务——图书申请查询所有
    getBookBorrowingList(){
      axios.get(`/oa/desktop/bookBorrowingAll`).then((data)=>{

        this.BookBorrowingList = data.data.data;

      }).catch((error)=>{

      })
    },
    //待处理任务——用章申请查询所有
    getSealManagementList(){
      axios.get(`/oa/desktop/sealManagementAll`).then((data)=>{

        this.SealManagementList = data.data.data;
      }).catch((error)=>{

      })
    },
    //待处理任务——用车申请查询所有
    getVehicleUsageAndVehicleManagementAndUsersList(){
      axios.get(`/oa/desktop/vehicleUsageAndVehicleManagementAndUsersAll`).then((data)=>{

        this.VehicleUsageAndVehicleManagementAndUsersList = data.data.data;

      }).catch((error)=>{

      })
    },
    //待处理任务——收入证明流程查询所有
    getincomeProofApplicationsList(){
      axios.get(`/oa/desktop/incomeProofApplicationsAll`).then((data)=>{

        this.incomeProofApplicationsList = data.data.data;

      }).catch((error)=>{

      })
    },
    //待处理任务——请假申请查询所有
    getLeaveApplicationsList(){
      axios.get(`/oa/desktop/leaveApplicationsAll`).then((data)=>{

        this.leaveApplicationsList = data.data.data;

      }).catch((error)=>{

      })
    },
    //待处理任务——出差申请查询所有
    getTravelApplicationsList(){
      axios.get(`/oa/desktop/travelApplicationsAll`).then((data)=>{

        this.travelApplicationsList = data.data.data;

      }).catch((error)=>{

      })
    },
    // 请假申请 按钮
    waitingTask_1(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《请假申请》"
      this.isoks1 = true
      this.isoks2 = false
      this.isoks3 = false
      this.isoks4 = false
      this.isoks5 = false
      this.isoks6 = false
      this.isoks7 = false
    },
    //出差申请 按钮
    waitingTask_2(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《出差申请》"
      this.isoks1 = false
      this.isoks2 = true
      this.isoks3 = false
      this.isoks4 = false
      this.isoks5 = false
      this.isoks6 = false
      this.isoks7 = false
    },
    //收入证明 按钮
    waitingTask_3(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《收入证明》"
      this.isoks1 = false
      this.isoks2 = false
      this.isoks3 = true
      this.isoks4 = false
      this.isoks5 = false
      this.isoks6 = false
      this.isoks7 = false
    },
    // 用车申请 按钮
    waitingTask_4(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《用车申请》"
      this.isoks1 = false
      this.isoks2 = false
      this.isoks3 = false
      this.isoks4 = true
      this.isoks5 = false
      this.isoks6 = false
      this.isoks7 = false

    },
    // 用章申请 按钮
    waitingTask_5(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《用章申请》"
      this.isoks1 = false
      this.isoks2 = false
      this.isoks3 = false
      this.isoks4 = false
      this.isoks5 = true
      this.isoks6 = false
      this.isoks7 = false

    },
    // 图书申请 按钮
    waitingTask_6(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《图书申请》"
      this.isoks1 = false
      this.isoks2 = false
      this.isoks3 = false
      this.isoks4 = false
      this.isoks5 = false
      this.isoks6 = true
      this.isoks7 = false

    },
    // 名片申请 按钮
    waitingTask_7(){
      this.titles_top = "待处理任务"
      this.titles_top = this.titles_top + "《名片申请》"
      this.isoks1 = false
      this.isoks2 = false
      this.isoks3 = false
      this.isoks4 = false
      this.isoks5 = false
      this.isoks6 = false
      this.isoks7 = true

    },
    //我的便签,获取数据
    getDate(){
      let id = this.user.id
      axios.get(`/oa/desktop/desktopAll/${id}`).
      then((data)=>{

        this.desktopList = data.data.data;

      }).catch((err)=>{

      })
    },
    //我的便签,查看对应便签信息
    desktopThis(noteId,title,content){
      this.dialogVisible1 = true
      this.desktop.title = title
      this.desktop.content = content
      this.desktop.noteId = noteId
    },
    //我的便签，OK
    desktopOK(){
      this.desktop.userId = this.user.id
      axios.put("/oa/desktop/desktopUpd",this.desktop).then((data) =>{
        if(data.data.code === 1){
          this.dialogVisible1 = false
          this.getDate()
        }else {
          alert("修改失败")
          this.dialogVisible1 = false
        }
      }).catch((error)=>{

      })
    },
    //我的便签，删除
    DesktopDelete(noteId){
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`/oa/desktop/desktopDel/${noteId}`).then((data)=>{

          if(data.data.code===1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getDate()
          }
        }).catch(function (error){

            })
      }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          }
      );
    },
    // 我的便签添加
    notesAdd(){
      this.desktop.userId = this.user.id
      axios.post("/oa/desktop/desktopAdd",this.desktop).then((data)=>{
        if(data.data.code === 1){
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.dialogVisible = false
          this.getDate()
        }else {
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
          this.dialogVisible = false
        }
      }).catch((error)=>{

      })
    },
    //通知公告，获取数据显示
    CalData:function() {
      axios.get("/oa/announcements/queryPage", {params: this.pageDto}).then((res) => {
        this.pageDto.pageNum = res.data.data.pageNum;
        this.pageDto.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
        this.pages = res.data.data.pages;
        this.announcementList = res.data.data.list;

      })
    },
    //通知公告发布时间，转换换方
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
      * 使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
      * */
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      //       return year + "-" + month + "-" + day;
    },
    CallOK(){ //通知公告，OK
      this.dialogVisible2 = false;
    },
    //通知公告，查看对应公告详情
    CallThis(titltes,content,startTime){
      this.dialogVisible2 = true;
      this.call.title = titltes
      this.call.content = content
      this.call.startTime = startTime
      // alert("通知公告"+data)
    },
    navigateToExternalSite() {
      // 这里可以添加一些前置逻辑，例如发送请求、修改状态等
      // ...
      // 跳转到外部网站
      window.open('https://www.rili.com.cn/', '_blank');
    },
    weatherman(){
      //天气预报
      window.open('https://weathernew.pae.baidu.com/weathernew/pc?query=%E6%B9%96%E5%8D%97%E9%95%BF%E6%B2%99%E5%A4%A9%E6%B0%94&srcid=4982&forecast=long_day_forecast', '_blank');
    }
  }
}
</script>

<template>

  <div>
    <div class="top">

      <div class="frame">
        <div style="" class="table-min">
          <h4>{{ titles_top }}</h4>
          <router-link to="/WaitingTaskView" class="router-link">
            <img src="@/assets/右边箭头.png" style="width: 20px;height:20px;"/>
          </router-link>
        </div>

        <div class="scrolls">
          <div style="position: relative;top: 1px;
          border-bottom:1px silver solid;
          padding-bottom: 3px;
          width: 430px;
          line-height: 35px;
          ">
            <el-button size="small" @click="waitingTask_1">请假</el-button>
            <el-button size="small" @click="waitingTask_2">出差</el-button>
            <el-button size="small" @click="waitingTask_3">收入</el-button>
            <el-button size="small" @click="waitingTask_4">用车</el-button>
            <el-button size="small" @click="waitingTask_5">用章</el-button>
            <el-button size="small" @click="waitingTask_6">图书</el-button>
            <el-button size="small" @click="waitingTask_7">名片</el-button>
          </div>
          <div>
          <!-- 首页表格信息显示 请假申请 -->
          <el-table :data="leaveApplicationsList" style="width: 100%;margin-top: 1px" v-if="isoks1">

            <el-table-column label="任务名称" width="170px">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span style="margin-left: 10px">{{scope.row.realName}}{{ scope.row.reason}}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="状态">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span style="margin-left: 10px" v-if="scope.row.status === 'approved' || scope.row.status === '批准'">批准</span>
                  <span style="margin-left: 10px" v-if="scope.row.status === 'pending'|| scope.row.status === '待处理'">待处理</span>
                  <span style="margin-left: 10px" v-if="scope.row.status === 'rejected' || scope.row.status === '驳回'">驳回</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-link style="margin-right: 5px">
                  <el-button size="small"  @click="LookleaveApplicationsAll(scope.row.applicationId)">
                    查看
                  </el-button>
                </el-link>

                <el-link @click="getLookUpdateLeaveApplicationsAndUsersLists(scope.row.applicationId)" v-if="scope.row.status==='待处理' || scope.row.status === 'pending'">
                  <el-button size="small" type="danger">
                    审核
                  </el-button>
                </el-link>
              </template>
            </el-table-column>
          </el-table>

            <!-- 首页表格信息显示 出差申请 -->
            <el-table :data="travelApplicationsList" style="width: 100%;margin-top: 1px" v-if="isoks2">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.realName}}{{ scope.row.reason}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'approved'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'pending'">待处理</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link  v-if="scope.row.status==='pending'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>

            <!-- 首页表格信息显示 收入证明申请 -->
            <el-table :data="incomeProofApplicationsList" style="width: 100%;margin-top: 1px" v-if="isoks3">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.realName}}{{ scope.row.reason}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'approved'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'pending'">待处理</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'rejected'">驳回</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link v-if="scope.row.status==='pending'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>

            <!-- 首页表格信息显示 用车申请 -->
            <el-table :data="VehicleUsageAndVehicleManagementAndUsersList" style="width: 100%;margin-top: 1px" v-if="isoks4">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.realName}}{{ scope.row.reason}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'APPROVED'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'PENDING'">待处理</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'REJECTED'">驳回</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link v-if="scope.row.status==='PENDING'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>

            <!-- 首页表格信息显示 用章证明申请 -->
            <el-table :data="SealManagementList" style="width: 100%;margin-top: 1px" v-if="isoks5">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.department}}{{ scope.row.reason}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'approved'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'pending'">待处理</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'rejected'">驳回</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link v-if="scope.row.status==='pending'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>

            <!-- 首页表格信息显示 图书借阅申请 -->
            <el-table :data="BookBorrowingList" style="width: 100%;margin-top: 1px" v-if="isoks6">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.borrowerDepartment}}{{ scope.row.bookName}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'approved'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'pending'">待处理</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'rejected'">驳回</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link v-if="scope.row.status==='pending'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>

            <!-- 首页表格信息显示 名片打印申请 -->
            <el-table :data="BusinessCardPrintingList" style="width: 100%;margin-top: 1px" v-if="isoks7">

              <el-table-column label="任务名称" width="170px">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{scope.row.applicantDepartment}}{{ scope.row.remarks}}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px" v-if="scope.row.status === 'approved'">批准</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'pending'">待处理</span>
                    <span style="margin-left: 10px" v-if="scope.row.status === 'rejected'">驳回</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-link style="margin-right: 5px">
                    <el-button size="small"  @click="LookleaveApplicationsAll(scope.$index, scope.row)">
                      查看
                    </el-button>
                  </el-link>

                  <el-link v-if="scope.row.status==='pending'">
                    <el-button size="small" type="danger">
                      审核
                    </el-button>
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>

      <div class="frame">
        <div class="table-min">
        <h4>通知公告</h4>
        <router-link to="/CallboardsView" class="router-link">
          <img src="@/assets/右边箭头.png" style="width: 20px;height:20px;"/>
        </router-link>
        </div>

        <div class="scrolls">
          <!-- 首页表格信息显示 -->
          <el-table :data="this.announcementList" style="width: 100%">

            <el-table-column label="标题" width="275px">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <el-link to="" @click="CallThis(scope.row.title,scope.row.content,dateFormat( scope.row.startTime))">
                  <span style="margin-left: 10px">{{ scope.row.title}}</span>
                  </el-link>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="日期">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span style="margin-left: 10px">{{dateFormat( scope.row.startTime)}}</span>
                </div>
              </template>
            </el-table-column>

          </el-table>
        </div>

      </div>

    </div>


    <div class="below">

      <div class="frame">
        <div class="table-min">
          <h4>我的便签</h4>
          <router-link to="" class="router-link"  @click="dialogVisible = true">
            <img src="@/assets/添加.png" style="width: 20px;height:20px;"/>
          </router-link>
        </div>

        <div class="frame-bianqian scrolls">
          <!-- 首页表格信息显示 -->
          <el-table :data="desktopList" style="width: 100%">
<!--            :row-style="{'background-color': 'transparent'}"-->
<!--            :header-cell-style="{'background-color': 'transparent'}"-->
<!--          >-->

            <el-table-column label="标题" width="370px">
              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <el-link to="" @click="desktopThis(scope.row.noteId,scope.row.title,scope.row.content)">
                  <span style="margin-left: 10px">{{ scope.row.title}}</span>
                  </el-link>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-link to="" @click="DesktopDelete(scope.row.noteId)">
                  <el-button size="small">
                    删除
                  </el-button>
                </el-link>
              </template>
            </el-table-column>


          </el-table>

        </div>

      </div>


      <div class="frame">
        <div class="table-min">
          <h4>常用工具</h4>
        </div>

        <div class="memo">
          <div class="memo-item">
            <div class="memo-item-left">
              <router-link to="/WebsiteGuideView" class="router-link">
                <img src="@/assets/常用网址导航.png" style="width: 50px;height:50px;"/>
                <h4>常用网址</h4>
              </router-link>
            </div>

            <div style="height: 74px;"  class="memo-item-left" @click="navigateToExternalSite">
              <router-link to="" class="router-link">
                <img src="@/assets/我的-我的日程.png" style="width: 50px;height:50px;"/>
                <h4>日历查询</h4>
              </router-link>
            </div>
            <div  class="memo-item-left">
              <router-link to="/ScheduleView" class="router-link">
                <img src="@/assets/日程管理.png" style="width: 50px;height:50px;"/>
                <h4>日程管理</h4>
              </router-link>
            </div>

            <router-link to="" @click="weatherman">
              <div class="me-weaher">
                <div style="height: 60px;width: 60px;">
                  <img src="@/assets/day/1.png"/>
                </div>

                <div style="height: 60px;width:170px;overflow:hidden">
                  <h3>
                  多云转晴
                  10~20
                  ℃
                  </h3>
                </div>

                <div style="width: 100px">
                  <h3 style="padding: 0;margin: 10px 0 0 0;">
                    {{week[date.getDay()]}}
                    <br>
<!--                    {{date}}-->
                  </h3>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>


<!--    我的便签（添加便签）-->
    <el-dialog
        v-model="dialogVisible"
        title="添加标签"
        width="500"
        :before-close="handleClose"
    >
      <el-form
          style="max-width: 600px;margin: 0 auto"
          :model="desktop"
          label-width="auto"
          class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="userCord">
          <el-input
              v-model="desktop.title"
              type="text"
              autocomplete="off"
              aria-required="true"
          />
        </el-form-item>

        <el-form-item label="内容" prop="userCord">
          <el-input
              v-model="desktop.content"
              type="textarea"
              autocomplete="off"
              aria-required="true"
          />
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="notesAdd()">
            添加
          </el-button>
        </div>
      </template>

    </el-dialog>

    <!--    我的便签（对应便签查看详细信息）-->
    <el-dialog
        v-model="dialogVisible1"
        :title=desktop.title
        width="500"
    >
      <el-form
          style="max-width: 600px;margin: 0 auto"
          :model="desktop"
          label-width="auto"
          class="demo-ruleForm"
      >
        <el-form-item label="内容" prop="userCord">
          <el-input
              v-model="desktop.content"
              type="textarea"
              autocomplete="off"
              aria-required="true"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="desktopOK()">OK</el-button>
        </div>
      </template>
    </el-dialog>



    <!--    通过公告（对应通知查看详细信息）-->
    <el-dialog
        v-model="dialogVisible2"
        :title="call.title"
        width="600"
        :before-close="handleClose"
    >
      <el-form
          style="max-width: 600px;margin: 0 auto"
          :model="car"
          label-width="auto"
          class="demo-ruleForm"
      >
        <el-form-item label="发布时间：" prop="userCord" text-align="right">
          <span> {{call.startTime}} </span>
        </el-form-item>
        <hr>
        <el-form-item prop="userCord">
          <span> {{call.content}} </span>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="CallOK()">OK</el-button>
        </div>
      </template>
    </el-dialog>




    <!--  查看 界面《请假》-->
    <el-dialog
        v-model="dialogVisible3"
        title="任务明细"
        width="600"
        :before-close="handleClose"
    >
      <div style="width: 570px;">
        <div class="tops" style="border-bottom: darkgray 1px solid">
          <div class="tops_left">
            <p>姓名：<span>{{LookUpdateLeaveApplicationsAndUsersList.realName}}</span></p>
            <h3>详细</h3>
            <p>开始时间：<span>{{LookUpdateLeaveApplicationsAndUsersList.startDate}}</span></p>
            <p>请假天数：<span>{{LookUpdateLeaveApplicationsAndUsersList.leaveDays}}</span>（天）</p>
            <p>请假理由：<span>{{LookUpdateLeaveApplicationsAndUsersList.reason}}</span></p>
            <h3>审批信息</h3>
          </div>
          <div class="tops_right">
            <p>部门：<span>{{ LookUpdateLeaveApplicationsAndUsersList.title }}</span></p>
            <p style="margin-top: 56px">结束时间：<span>{{LookUpdateLeaveApplicationsAndUsersList.endDate}}</span></p>
            <p>请假类型：<span>{{LookUpdateLeaveApplicationsAndUsersList.leaveType}}</span></p>
          </div>
        </div>

        <div class="buts">
          <div class="buts_left">
            <h3>前台记录</h3>
            <p>审批人：<span>... ...</span></p>
            <p>审批信息：<span>... ...</span></p>
            <h3>薪酬专员记录</h3>
            <p>审批人：<span>... ...</span></p>
            <p>审批时间：<span>... ...</span></p>
            <h3>部门经理审批</h3>
            <p>审批人：<span>******</span></p>
            <p>审批结果：
              <span style="color: darkred" v-if="LookUpdateLeaveApplicationsAndUsersList.status === '待处理' || LookUpdateLeaveApplicationsAndUsersList.status === 'pending' ">待处理</span>
              <span style="color: #42b983" v-if="LookUpdateLeaveApplicationsAndUsersList.status === '批准' || LookUpdateLeaveApplicationsAndUsersList.status === 'approved' ">批准</span>
              <span style="color: darkred" v-if="LookUpdateLeaveApplicationsAndUsersList.status === '驳回' || LookUpdateLeaveApplicationsAndUsersList.status === 'rejected' ">驳回</span>
            </p>
          </div>

          <div class="buts_right">
            <p style="margin-top: 56px">审批时间：<span>... ...</span></p>
            <p style="margin-top: 92px">审批结果：<span>... ...</span></p>
            <p>审批信息：<span>... ...</span></p>
            <p style="margin-top: 55px">审批时间：<span>{{LookUpdateLeaveApplicationsAndUsersList.createdAt}}</span></p>
          </div>
        </div>

      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible3 = false">取消</el-button>
        </div>
      </template>
    </el-dialog>


    <!--  审核 界面《请假》-->
    <el-dialog
        v-model="dialogVisible4"
        title="审核"
        width="600"
        :before-close="handleClose"
    >
      <div class="tops" style="border-bottom: darkgray 1px solid;height: 200px">
        <div class="tops_left">
          <p>姓名：<span>{{LookUpdateLeaveApplicationsAndUsersList.realName}}</span></p>
          <p>开始时间：<span>{{LookUpdateLeaveApplicationsAndUsersList.startDate}}</span></p>
          <p>请假天数：<span>{{LookUpdateLeaveApplicationsAndUsersList.leaveDays}}</span>（天）</p>
          <p>请假理由：<span>{{LookUpdateLeaveApplicationsAndUsersList.reason}}</span></p>
          <h3>操作</h3>
        </div>
        <div class="tops_right">
          <p>部门：<span>{{ LookUpdateLeaveApplicationsAndUsersList.title }}</span></p>
          <p style="margin-top: 50px">结束时间：<span>{{LookUpdateLeaveApplicationsAndUsersList.endDate}}</span></p>
          <p>请假类型：<span>{{LookUpdateLeaveApplicationsAndUsersList.leaveType}}</span></p>
        </div>
      </div>

      <div class="buts" style="height: 210px;overflow-y: scroll; scrollbar-width: thin;  scrollbar-color: darkgray transparent;">
        <div class="buts_left"  style="margin-top: 20px">
          <el-form
              style="width: 500px;margin: 0 auto"
              :model="LookUpdateLeaveApplicationsAndUsersList"
              label-width="auto"
              class="demo-ruleForm"
          >
            <el-form-item label="审批意见：" prop="userCord">
              <el-input
                  type="textarea"
                  autocomplete="off"
                  aria-required="true"
              />
            </el-form-item>

            <el-form-item label="操作人：" prop="userCord" aria-readonly="true">
              <el-input
                  v-model="this.user.realName"
                  type="text"
                  autocomplete="off"
                  aria-required="true"
                  readonly
              />
            </el-form-item>


            <p>
              <input type="radio"
                     v-model="checkedValue"
                     value="approved"
                     name="iso">
              <span style="margin-left: 10px">审核通过</span>
              <br>
              <br>
              <input type="radio"
                     v-model="checkedValue"
                     value="rejected"
                     name="iso">
              <span style="margin-left: 10px">驳回</span>
            </p>
          </el-form>

        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updateIsok_1">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>




</template>

<style scoped lang="less">
//.below{
//  background-color: red;
//}

.me-weaher{
  margin: 20px 0 0 40px;
  padding-top: 10px;
  width: 370px;
  height: 80px;
  box-sizing: border-box; //固定盒子大小，设置内外边距不影响
  border-radius: 10px;
  background-color: aqua;
}
.me-weaher div{
  display: inline-block;//行内块元素转换
  margin-left: 10px;
  float: left;
}

h4{
  margin: 0;
  padding: 0;
  display: inline-block;
}
.router-link{
  float: right;
}
img{
  vertical-align:middle
}

.memo div{
  display: inline-block;
}

.memo-item-left{
  width: 90px;
  margin: 25px 0 0 40px;
}

.top{
  margin: 15px 0 10px 0;
}

.top .frame{
  display: inline-block;
  width: 450px;
  height: 255px;
  margin-left: 40px;
  border: darkgray 1px solid;
  border-radius: 5px;
}
.table-min{
  border-bottom: darkgray 1px solid;
}


.top .frame div:nth-child(2){
  height: 230px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: azure transparent;
}

.below .frame div:nth-child(2){
  height: 230px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: azure transparent;
}

.below .frame{
  display: inline-block;
  width: 450px;
  height: 255px;
  margin-left: 40px;
  border: darkgray 1px solid;
  border-radius: 5px;
}

.tops{
  width: 570px;
  height: 235px
}
.tops .tops_left,.tops_right{
  text-align: left;
  width: 275px;
  display: inline-block;
  float: left;
}

.buts{
  width: 570px;
  height: 310px
}
.buts .buts_left,.buts_right{
  text-align: left;
  width: 275px;
  display: inline-block;
  float: left;
}


</style>
